<template>
  <div class="add_HX">

    <div class="addhx">
      <!-- 步骤条 -->
      <div class="buzhoutiao">
        <el-steps :active="active" :align-center="true" finish-status="success">
          <el-step title="选择经销商" icon="iconfont icon-icon--"></el-step>
          <el-step title="生成协议模板" icon="iconfont icon-icon--"></el-step>
          <el-step title="协议资料上传" icon="iconfont icon-icon--"></el-step>
          <el-step title="提交完成" icon="iconfont icon-icon--"></el-step>
        </el-steps>
      </div>
      <!-- 选择经销商 -->
      <choiceJXS v-if="active==1" @fun="fun"></choiceJXS>
      <!-- 生成协议模板 -->
      <generate v-if="active==2" @fun="fun"></generate>
      <!-- 协议资料上传 -->
      <protocol v-if="active==3" @fun="fun"></protocol>
    </div>
  </div>
</template>

<script>
  // 选择经销商
  import choiceJXS from "@/components/components/add_HX_component/choice_JXS.vue"
  //生成协议模板
  import generate from "@/components/components/add_HX_component/Generate_template.vue"
  // 协议资料上传
  import protocol from "@/components/components/add_HX_component/Protocol_upload.vue"
  export default{
    name:"add_HX",
    components:{
      choiceJXS,
      generate,
      protocol
    },
    data(){
      return{
        // 当前步骤条的位置
        active:3,
      }
    },
    methods:{
      // 接收子组件传递过来的active值
      fun(res){
        this.active=res;
      },
    }
  }
</script>

<style scoped="scoped" lang="scss">
  .add_HX{
    padding: 0.6rem 0.4rem 0.6rem 0.6rem;
    box-sizing: border-box;

    .addhx{
      position: relative;
      border: 1px solid #fff;
      background-color: #fff;
      border-radius: 0.2rem;
      min-height: 77vh;
      padding-bottom: 1.3rem;
      box-sizing: border-box;

      .buzhoutiao{
        width: 70%;
        margin: 0.8rem auto;
      }
    }
  }


  >>> .el-step__head.is-process,.el-step__head.is-wait {
      color: #DADADA!important;
  }

  >>> .el-step__head.is-wait .el-step__icon.is-icon i{
    font-size: 0.4rem;
    color:#DADADA;
  }
  >>> .el-step__head.is-process i{
    color:#DADADA;
    font-size: 0.4rem;
  }

  >>> .el-step__title.is-wait{
    color: #DADADA!important;
    font-weight: normal;
    letter-spacing: 0.02rem;
  }
  >>> .el-step__title.is-process{
    color: #DADADA!important;
    font-weight: normal;
    letter-spacing: 0.02rem;
  }


  /* 步骤条选中后 */
  >>> .el-step__head.is-success .el-step__icon.is-icon i{
    border-radius: 50%;
    padding: 0.06rem;
    background-color: #29A7FA;
  }
  >>> .el-step__head.is-success {
      color: #fff!important;
      border-color: #29A7FA!important;
  }
  >>> .el-step__title.is-success{
    color: #333!important;
  }

  >>> .el-form-item__label{
    color: #333;
    font-size: 0.24rem;
  }
  /* input输入框长度 */
  >>> .el-form-item__content{
    width: 35%!important;
  }
  /* 下拉列表框的宽度 */
  >>> .el-select{
    width: 100%;
  }
</style>
